---
name: Footer A2
component: footer
---

# Footer A2

```jsx live
<footer
  sx={{
    fontSize: 1,
    color: 'background',
    bg: 'text',
    variant: 'styles.footer',
  }}>
  <div
    sx={{
      display: 'flex',
      flexWrap: 'wrap',
      alignItems: 'center',
      maxWidth: 768,
      mx: 'auto',
      px: 2,
      py: 4,
    }}>
    <Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
      Home
    </Link>
    <Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
      Blog
    </Link>
    <Link to="/" sx={{ variant: 'styles.navlink', p: 2 }}>
      About
    </Link>
    <div sx={{ mx: 'auto' }} />
    <div sx={{ p: 2 }}>© 2019 Jane Doe</div>
  </div>
</footer>
```
